<template>

	<div style="position: relative;">


		<div class="add_sku">
			<!-- <span>添加SKU</span> -->
			<i class="el-icon-circle-plus-outline " @click="drawer_add = true"></i>
			<i class="el-icon-remove-outline" @click="del_sku()"></i>
		</div>
		
		<el-drawer size='60%' title="新增SKU" :visible.sync="drawer_add" direction="btt">
			
			<ChangeBrand v-on:listenToChangeBrandIDEvent="changeBrandId"></ChangeBrand>
			
			<ChangeUnit v-on:listenToChangeUnitIDEvent="changeUnitId"></ChangeUnit>
			<ChangeSpu v-on:listenToChangeSpuIDEvent="changeSpuId"></ChangeSpu>
			
			<el-button 
			type="primary" v-on:click='add_sku()' 
			style="display: block; width: 100%; margin: 10px auto;">
				添加SKU</el-button>
			<!-- <div style="margin-left: 20px; font-weight: 800;">sKu名称:{{spu_name}}</div> -->
		
			<!-- <div>
				<span>请选择SPU</span>
				<el-autocomplete class="inline-input" v-model="spu_name" :fetch-suggestions="querySearch_spu"
					placeholder="请输入内容" @select="handleSelect_spu"></el-autocomplete>
			</div>
		
			<div>
				<span>请选择品牌</span>
				<el-autocomplete class="inline-input" v-model="brand_name" :fetch-suggestions="querySearch"
					placeholder="请输入内容" @select="handleSelect_brand"></el-autocomplete>
			</div>
		
			<div>
				<span>请选择单位</span>
				<el-autocomplete class="inline-input" v-model="unit_name" :fetch-suggestions="querySearch_unit"
					placeholder="请输入内容" @select="handleSelect_unit"></el-autocomplete>
			</div>
		
		
			<el-button type="primary" v-on:click='add_sku()' style="display: block; width: 80%; margin: 10px auto;">
				添加SKU</el-button> -->
		</el-drawer>

	</div>
</template>

<script>
	import {
		Toast
	} from 'vant'
	
	import {
		add_sku_url,
		// select_sku_url,
		// select_all_spu_url,
		// select_all_brand_url,
		// select_all_unit_url,
		del_sku_url
	} from "../../utils/setting.js"
	
	import ChangeUnit from '../change_item/change_unit.vue'
	import ChangeBrand from '../change_item/change_brand.vue'
	import ChangeSpu from '../change_item/change_spu.vue'
	export default {
		name: '',
		components: {ChangeUnit, ChangeBrand, ChangeSpu},
		props: ['sku_id'],
		data() {
			return {
				now_sku_id: this.sku_id,
				drawer_add: false,
				unit_id: '',
				brand_id: '',
				spu_id: '',
			}
		},
		methods: {
			del_sku() {
				if (this.now_sku_id == '') {
					Toast('请选择一个sku')
					return
				}
				// console.log(this.now_sku_id)

				this.$axios({
					method: 'POST',
					url: del_sku_url,
					data: this.qs.stringify({ //这里是发送给后台的数据
						sku_id: this.now_sku_id,

					})
				}).then((response) => { //这里使用了ES6的语法
					// console.log(response) //请求成功返回的数据
					if (response.data.status == 1) {

						this.$notify({
							type: 'success',
							message: '删除成功'
						});

						this.$emit('deleteSku', true)


					} else {
						// console.log(response.data.errorMsg)
						this.$notify({
							type: 'error',
							message: '危险删除，如确需删除请联系系统管理员，具体原因：' + response.data.errorMsg
						});
					}
				}).catch((error) => {
					console.log(error) //请求失败返回的数据
					this.$message({
						message: '请联系管理员' + '!!!',
						type: 'error'
					})
				})

			},
			
			add_sku() {
				console.log(this.brand_id)
				console.log(this.unit_id)
				console.log(this.spu_id)
			
				if (this.brand_id === '' || this.spu_id === '' || this.unit_id === '') {
			
					Toast({
						message: '请输入完整的参数' + '!!!',
						type: 'error'
					})
			
					return
			
				}
			
				// console.log('shadiao')
				this.$axios({
					method: 'GET',
					url: add_sku_url,
					params: {
						spu_id: this.spu_id,
						brand_id: this.brand_id,
						unit_id: this.unit_id
					}
				}).then((response) => { //这里使用了ES6的语法
			
					if (response.data.status == -1) {
						this.$message({
							message: response.data.errorMsg + '!!!',
							type: 'error'
						})
			
						return
					}
			
					this.$message({
						message: 'SKU添加成功，请添加对应的属性，正式完SKU添加!!!',
						type: 'success'
					})
					setTimeout(
			
						() => {
							location.reload()
						}, 2000
			
					)
			
				}).catch((error) => {
			
					this.$message({
						message: '请联系管理员' + '!!!',
						type: 'error'
					})
				})
			
			},
			
			
			
			changeUnitId(data){
				console.log(data)
				this.unit_id = data['unit_id']
			},
			
			changeBrandId(data){
				this.brand_id = data['brand_id']
				// console.log(this.brand_id)
			},
			
			changeSpuId(data){
				this.spu_id = data['spu_id']
				console.log(this.spu_id)
			},
		},
		computed: {},
		watch: {
			sku_id: function(val, oldVal) {
				// console.log(val)
				console.log('new: %s, old: %s', val, oldVal)
				this.now_sku_id = val

			}
		},
		created() {},
		mounted() {

		},
	}
</script>

<style scoped lang="less">
	.add_sku {

		height: 50px;
		width: 50px;
		position: fixed;
		font-size: 50px;
		right: 5px;
		top: 60%;
		color: red;
	}
</style>
